

import React, { useState, useEffect, useRef } from 'react'
import { backgroundObj, toast, loginData } from '@/utils/utils'
import { getCurrentInstance, useReachBottom } from '@tarojs/taro'
import { Space } from '@/components/UiComponents';
import { fetchVideoPlayAuth, fetchVideoUrl } from '@/server/shop';
import { AtAccordion, AtList, AtListItem } from 'taro-ui'
import "taro-ui/dist/style/components/accordion.scss";
import Tabs from '@/components/Tabs'
import Router from '@/utils/router'
import { View, Swiper, SwiperItem, Video, RichText } from '@tarojs/components'
import { fetchCheckMiniProgramUpdate } from '@/server/shop';
import "taro-ui/dist/style/components/list.scss";
import { formatRichText, handleLink } from '@/utils/utils';
import { CopyToClipboard } from '@/utils/utils'
// import Aplayer from '@/components/Aplayer';
const offline = (props) => {
  let playerVideo = null;
  const { data = {}, dispatch } = props
  const { params } = getCurrentInstance().router
  const { firstVideoId } = params
  const [menuList, setMenuList] = useState([])
  const [srcActive, setSrcActive] = useState('')
  const [materialInfoVisible, setMaterialInfoVisible] = useState(true)
  const ref = useRef(null)
  const [check, setCheck] = useState('1')

  const fetchVideo = () => {
    fetchVideoPlayAuth({ videoId: firstVideoId }).then(val => {
      const { auth, videoMeta } = val
      const { videoId } = videoMeta

      setConfigData({
        ...configData,
        vid: videoId,//必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
        playauth: auth,//必选参数。音视频播放凭证。
        ...videoMeta,
      })
    })
  }
  const { containPackageGoodsList
    = [], goodsBaseInfo = {}, materialInfoList = [], videoInfo = {} } = data
  const { content } = goodsBaseInfo
  const { firstVideoUrl = '[]', secondVideoUrl = '[]' } = videoInfo
  const [activeKey, setActiveKey] = useState('detail')
  const [tabList, setTabList] = useState([{ value: 'detail', label: '详情' }, { value: 'materialInfo', label: '资料' }])
  const RenderShopContainItems = containPackageGoodsList.map((item, index) => {
    const { cover, goodsName, goodsDesc, id } = item
    return <SwiperItem key={index} >
      <View className='Shopcontain_head'>包含该课程的还有</View>
      <View className='Shopcontain_content' onClick={(e) => {
        e.stopPropagation();
        Router('shopDetail')
      }}>
        <View style={backgroundObj(cover.split(',')[0])} className='Shopcontain_Profile'></View>
        <View className='Shopcontain_body font_hide'>
          <View className='Shopcontain_body_title font_hide'>{goodsName}</View>
          <View className='Shopcontain_body_desc'>{goodsDesc}</View>
        </View>
      </View>
    </SwiperItem>
  })
  const renderIcon = (type, url) => {

    if (type === 'image') {
      return 'file-png'
    } else if (type === 'video') {
      return 'file-video'
    } else if (type === 'voice') {
      return 'file-audio'
    }
    else if (type === 'ebook') {
      return 'file-new'
    } else {
      function getFileExtension(fileName) {
        // 使用正则表达式匹配文件名中的后缀部分
        const regex = /(?:\.([^.]+))?$/;
        const result = regex.exec(fileName);

        // 提取匹配到的后缀，如果没有后缀则返回空字符串
        const extension = result ? result[1] : '';

        return extension;
      }
      return `file-${getFileExtension(url)}`
    }
  }
  useEffect(() => {
    fetchCheckMiniProgramUpdate().then(val => {
      const { needUpdate } = val
      setCheck(needUpdate)
    })
  }, [])
  const renderContent = {
    detail:
      <View>
        {containPackageGoodsList.length > 0 && <Swiper className='Shopcontain_goods_box'>
          {RenderShopContainItems}
        </Swiper>}
        <RichText nodes={formatRichText(content)} style={{ marginTop: 12 }} ></RichText>
      </View>,
    materialInfo: <AtAccordion
      open={materialInfoVisible}
      onClick={() => setMaterialInfoVisible(!materialInfoVisible)}
      title='资料列表'
    >
      <AtList hasBorder={false}>
        {materialInfoList.map((item, index) => {
          const { materialName, contentType, content } = item
          const { url } = JSON.parse(content);
          return <AtListItem
            onClick={() => handleLink(contentType, url)}
            key={index}
            title={materialName}
            iconInfo={{ value: renderIcon(contentType, url) }}
          />
        })}
      </AtList>
    </AtAccordion>
  }[activeKey]
  useEffect(() => {
    if (firstVideoUrl && secondVideoUrl) {
      const srcInfo = JSON.parse(firstVideoUrl).filter(item => item.playUrl.endsWith('.m3u8')).map(item => item.playUrl).toString();
      const srcInfoMp4 = JSON.parse(firstVideoUrl).filter(item => item.playUrl.endsWith('.mp4')).map(item => item.playUrl).toString();
      const srcInfo1 = JSON.parse(secondVideoUrl).filter(item => item.playUrl.endsWith('.m3u8')).map(item => item.playUrl).toString();
      const srcInfo1Mp4 = JSON.parse(secondVideoUrl).filter(item => item.playUrl.endsWith('.mp4')).map(item => item.playUrl).toString();
      const src1 = srcInfo ? srcInfo : srcInfoMp4
      const src2 = srcInfo1 ? srcInfo1 : srcInfo1Mp4
      setMenuList([src1, src2])
      setSrcActive(src1)
    }
    else if (firstVideoUrl) {
      const srcInfo = JSON.parse(firstVideoUrl).filter(item => item.playUrl.endsWith('.m3u8')).map(item => item.playUrl).toString();
      const srcInfoMp4 = JSON.parse(firstVideoUrl).filter(item => item.playUrl.endsWith('.mp4')).map(item => item.playUrl).toString();
      const src1 = srcInfo ? srcInfo : srcInfoMp4
      setMenuList([src1])
      setSrcActive(src1)
    }
    else if (secondVideoUrl) {
      const srcInfo1 = JSON.parse(secondVideoUrl).filter(item => item.playUrl.endsWith('.m3u8')).map(item => item.playUrl).toString();
      const srcInfo1Mp4 = JSON.parse(secondVideoUrl).filter(item => item.playUrl.endsWith('.mp4')).map(item => item.playUrl).toString();
      const src2 = srcInfo1 ? srcInfo1 : srcInfo1Mp4
      setMenuList([src2])
      setSrcActive(src2)
    }
    else {
      return
    }
  }, [data])
  if (check === '1') {
    return <View></View>
  }
  return (
    <View className='ShopDetail_box'>
      <View className='ShopDetail_videoLook'>
        <Video autoplay style={{ width: '100%', height: '100%' }} src={srcActive}></Video>
        {/* <Aplayer effect={[configData]} ref={ref} config={configData}></Aplayer> */}
      </View>
      <View className='ShopDetail_content'>
        <View className='ShopDetail_tags'>
          {menuList.map((item, index) => {
            return <View className={srcActive === item ? 'ShopDetail_tags_selelctbox' : 'ShopDetail_tags_box'} onClick={() => { setSrcActive(item) }}>视频{index + 1}</View>
          })}


        </View>
      </View>
      <View className='ShopDetail_rectText'>
        <Tabs list={tabList} stretch={false} onChange={(e) => { setActiveKey(e) }} activeKey={activeKey}>
        </Tabs>
        <Space style={{ width: '100%', textAlign: 'center' }} direction='vertical'>
          {renderContent}
        </Space>
      </View>
    </View >
  )
}
export default offline